Interação Humano-Computador

Thiago Pires

Conceitos de interfaces e Interação Humano-Computador

Interface


Uma interface é uma superfície de contato que reflete as propriedade físicas das partes que interagem, as funções a serem executadas e o balanço entre poder e controle


Pela definição acima, podemos considerar que uma torneira é uma interface?

Exemplo de interface


A torneira é uma superfície de contato, pois literalmente encostamos nela para que ela cumpra a sua função. Girar para um lado aumenta o fluxo de água, girar para o outro vai diminuí-lo.

Como um exercício, pense nessa definição de interface para outros objetos cotidianos que você utiliza.

Dois componentes


A interface é composta por dois elementos: o agente e o paciente.

  • O agente é aquele que deseja que uma ação seja executada e, assim, aciona a interface, que recebe a interação e responde a ela
  • No caso o paciente é a torneira que é acionada pela ação do agente

E no caso de uma torneira acionada automaticamente?

Interfaces de computadores


Computadores possuem interfaces extremamente complexas:

  • Possuem diversas funções que devem ser executadas em um único objeto
  • Em uma mesma máquina, você pode acessar sites da Internet, editar textos e imagens, jogar um jogo ou conversar com outras pessoas

Tudo feito por meio de interfaces!

  • As interfaces buscam sempre ser imperceptíveis e cada vez vez menos passivas, para que o usuário possa chegar à ação desejada da maneira mais fácil possível.
  • O ato de abrir o navegador de seu computador e visitar um site, parece algo natural e direto

O sucesso do ChatGPT e a relação com interfaces


Entrevista com Jan Leike, pesquisador na OpenAI

Jan Leike: Eu adoraria entender melhor o que está impulsionando tudo isso, o que está fazendo ele viralizar. Tipo, honestamente, não entendemos. Não sabemos.

Parte da perplexidade da equipe vem do fato de que a maior parte da tecnologia que move o ChatGPT não é nova. O ChatGPT é uma versão aprimorada do GPT-3.5, uma família de grandes modelos de linguagem que a OpenAI lançou alguns meses antes do chatbot. O próprio GPT-3.5 é uma versão atualizada do GPT-3, que apareceu em 2020.

ChatGPT foi construído com base em uma arquitetura chamada Transformers, uma arquitetura de redes neurais que foi proposta pelo Google em 2017.

O sucesso do ChatGPT e a relação com interfaces


Jan Leike: De certa forma, podemos entender o ChatGPT como uma versão de um sistema de IA que já temos há algum tempo. Não é um modelo essencialmente mais capaz do que o que tínhamos antes. Os mesmos modelos básicos estavam disponíveis na API há quase um ano antes do lançamento do ChatGPT. Mas se olharmos por outro aspecto, o tornamos mais alinhado com o que os humanos querem fazer com ele. Ele fala com você em diálogo, sua interface é um bate-papo de fácil acesso, ele tenta ser útil. É um progresso incrível, e acho que é isso que as pessoas estão percebendo.

Um breve histórico
da IHC

Década de 1940: Durante a Segunda Guerra Mundial, os primeiros computadores eletrônicos, como o Colossus e o ENIAC, foram desenvolvidos. A interação com essas máquinas era feita principalmente por meio de painéis de controle e cartões perfurados.

Um breve histórico
da IHC

Década de 1960: Surgiram as primeiras interfaces de linha de comando, que permitiam aos usuários interagir com os computadores por meio de comandos de texto. A IBM introduziu o sistema de entrada/saída de dados chamado de “ponto de vista do terminal”.

Um breve histórico
da IHC

Década de 1970: Com o surgimento dos primeiros computadores pessoais, como o Apple II e o IBM PC, as interfaces gráficas começaram a ganhar destaque. O Xerox PARC desenvolveu o sistema Alto, que foi pioneiro na utilização de ícones, menus e janelas.

Um breve histórico
da IHC

Década de 1980: A Apple lançou o Macintosh, popular utilizando ainda mais as interfaces gráficas. O uso do mouse como dispositivo de entrada tornou-se comum, e os sistemas operacionais, como o Windows da Microsoft, adotaram amplamente esse paradigma.

Um breve histórico
da IHC

Década de 1990 em diante: Com a expansão da Internet e o surgimento dos dispositivos móveis, como smartphones e tablets, as interfaces humano-computador evoluíram para se adaptar a essas novas plataformas. Surgiram interfaces baseadas em toque, gestos e sensores, proporcionando interações mais intuitivas e imersivas.

Um breve histórico
da IHC

Atualidade: Hoje em dia, as interfaces humanocomputador continuam a evoluir com a incorporação de tecnologias como inteligência artificial, realidade virtual e aumentada, reconhecimento de voz e muito mais. A ênfase está na criação de interfaces que sejam acessíveis, intuitivas e que proporcionem uma experiência de usuário satisfatória.

Objetivo do IHC

IHC é a disciplina preocupada com o design, avaliação e implementação de sistemas computacionais interativos para uso humano e com o estudo dos principais fenômenos ao redor deles


Resumindo: Produzir sistemas usáveis, seguros e funcionais

Ergonomia e usabilidade


Para ajudar os profissionais a detalhar os processos e otimizar cada vez mais a interação, foram criados dois conceitos que abrangem o estudo dessas relações entre as pessoas e as coisas: a ergonomia e a usabilidade

Ergonomia

Ergon nomos: Trabalho + regras

  • A ergonomia é um conjunto de normas criado para otimizar o trabalho
  • O estabelecimento da ergonomia tem grande relação com a Segunda Guerra Mundial, quando se tornou necessário pensar melhor nas características humanas para que um mesmo avião fosse facilmente pilotado por diversos pilotos.

Ergonomia


A ergonomia deve pensar na melhor maneira de algo se adaptar ao seu usuário, e não que o ser humano precise se adaptar a esse algo.


  • Ajustar as exigências do trabalho às possibilidades do ser humano, com o intuito de reduzir a carga externa.
  • Conceber as máquinas, os equipamentos e as instalações pensando em maior eficácia, precisão e segurança.
  • Estudar cuidadosamente a configuração dos postos de trabalho, de forma a assegurar ao trabalhador uma postura correta.
  • Adaptar o ambiente às necessidades fisicas do ser humano.

Usabilidade


Usabilidade é um termo que se tornou popular a partir da década de 1990 para caracterizar interfaces a partir da facilidade de uso e interação com o usuário. A primeira norma de usabilidade foi a ISO/IEC 9.126, publicada em 1991.

  • Eficiência: as pessoas podem realizar ações mediante uma quantidade adequada de esforço.
  • Eficácia: o sistema realiza funções a que se destina com informações adequadas e organizadas apropriadamente.
  • Fácil de aprender: é possivel aprender como realizar as ações e lembrar como repeti-las após algum tempo.
  • Segurança: o sistema é seguro de operar na variedade de contextos em que será usado.
  • Utilidade: o sistema realiza aquilo que as pessoas querem que seja feito.

Usabilidade centrado no humano


Assim como o objetivo da ergonomia é focar o humano, o mesmo ocorre com a usabilidade. Para alcançar a usabilidade adequada, o desenvolvimento de um sistema deve ser centrado no humano, já que são pessoas que vão utilizá-lo e que podem depender dele para conseguir realizar as ações que desejam. Porém, enquanto a ergonomia foca o trabalho e o conforto fisico do usuário, a usabilidade lida com interfaces e a satisfação de quem vai utilizá-las.

Diretrizes para o projeto de interação

Ao estudar os conceitos de ergonomia e usabilidade vemos que inúmeros fatores influenciam a interação das pessoas com as interfaces que nos cercam o tempo todo. Embora existam diversos tipos de interface, algumas premissas e conceitos são comuns a todos os projetos. Antes de tudo, vamos entender um pouco melhor o ato de projetar

O que é projetar?


Em qual contexto você já ouviu a palavra projeto? Engenheiros e arquitetos fazem projetos para suas obras. Os pesquisadores precisam de um projeto de pesquisa antes de iniciarem seus estudos. Designers projetam objetos, e urbanistas projetam a cidade.


O que há de comum?

Todos esses profissionais lidam com problemas a serem resolvidos.

Projetos em IHC


Para profissionais que trabalham com IHC. Ao idealizarem uma interface para um software, assim como o arquiteto faz com a casa, esses profissionais, antes mesmo de escreverem uma única linha de código, vão pensar na melhor maneira de interagir com o usuário, se vão utilizar menus ou botões, imagens ou texto, quais as melhores cores para cada mensagem, enfim, como deixar tudo com a melhor usabilidade possível.

Interface e interação


Vimos que a interface é tudo aquilo que utilizamos para interagir com algo, a interface de um sistema computacional é formada pelos elementos que uma pessoa utiliza para interagir com um computador.


A interação é, então, o conjunto formado por usuário e sistema, em que o usuário executa ações sobre o sistema, que os interpreta e os comunica em linguagem de máquina às aplicações disponíveis

Estilos de interação


A escolha do estilo de interação é parte de um projeto de IHC, porque define como o usuário vai utilizar o sistema e a complexidade de desenvolvimento que ele vai demandar.

Linguagem Natural


A linguagem natural é um estilo de interação em que se reproduz o modelo cotidiano por meio da língua. Em resumo, é como se conversássemos com a máquina. A principal vantagem desse estilo é a facilidade de uso para usuários com pouco conhecimento de computadores, porque a ideia é que as máquinas entendam a fala da mesma forma que um amigo nos entende quando conversamos com ele.

Linguagens de comando


Nas interfaces de linguagem de comando, o usuário envia comandos específicos à máquina para que esta execute as ações desejadas. A máquina entende um conjunto de comandos predefinidos, que podem ser palavras, abreviações ou teclas de funções.


mkdir -p pasta/subpasta

Manipulação direta


Por manipulação direta entendemos as interfaces que tentam imitar os movimentos do usuário. A interação mais comum que fazemos por manipulação direta é o ato de clicar e arrastar com o mouse. O que vemos na tela é uma analogia do nosso movimento com o mouse.

Atualmente, novas ações de manipulação direta são desenvolvidas a partir dos dispositivos touch, como os smartphones e os tablets. ato de arrastar se tornou mais “direto” ainda, já que, quando arrastamos, ao encostar em uma tela, temos maior impressão de estarmos manipulando o elemento virtual.

WIMP


WIMP é a sigla para windows, icons, menus e pointers, que são as palavras em inglês para janelas, ícones, menus e apontadores. Os WIMP compõem a característica mais básica dos sistemas operacionais modernos e de todos os Graphical User Interface (GUI) desenvolvidos até hoje. Como podemos ver, o WIMP é formado por quatro estilos diferentes. Mesmo assim, podemos encontrar outros estilos, como manipulação direta e preenchimento de formulários.

Sua principal vantagem é a flexibilidade e a variedade de saídas para o usuário. Por exemplo: você pode copiar um texto a partir do ícone de copiar, pelo menu Editar > Copiar, ou ainda com o comando Ctrl + C do teclado.

Comparativo


Projeto de interação


Agora que você sabe o que é interação e seus diferentes estilos, deve se perguntar: como decidir qual a melhor solução para o usuário? Chegou a hora de iniciar um projeto de interação.


“O projeto de interação é uma atividade prática e criativa que tem por objetivo final o desenvolvimento de um produto que ajude os usuários a atingirem suas metas”. Portanto, é sempre preciso ter em mente que o objetivo do projeto de interação é tornar mais simples a vida do seu usuário.

Processos do projeto de interação


Não existe um único modelo para criar um projeto de interação. No entanto, como ele envolve dezenas de processos, uma vez que a interação é um fenômeno complexo e que envolve muitas ações do usuário, é importante que tudo seja muito detalhado e descrito

Essa descrição rica em detalhes leva ao desenvolvimento de wireframes, modelos e outros tipos de protótipos que levam a testes mais precisos e que reduzem o tempo do desenvolvimento.

Atividades do projeto de interação


Desde a identificação do problema até o início do desenvolvimento, um projeto de IHC passa por diversas fases.


  1. Identificar necessidades e estabelcer requisitos
  2. Desenvolver projetos alternativos
  3. Construir versões interativas
  4. Avaliar o projeto

Identificar necessidades e estabelcer requisitos


  • Devemos conhecer quem são nossos usuários-alvo
  • De que forma o produto interativo poderia ser útil.


Essas necessidades constituem as bases dos requisitos do produto e sustentam o projeto e o seu desenvolvimento. Essa atividade é fundamental para uma abordagem centrada no usuário

Desenvolver projetos alternativos


Atividade central do projeto de interação:

  • Projeto conceitual: envolve produzir o modelo conceitual para o produto. Um modelo conceitual descreve que produto deve fazer, como se comportar e com o que parecer.
  • Projeto fisico: considera detalhes como cores, sons, imagens, menus e ícones. As alternativas são consideradas em cada ponto.

Construir versões interativas


A maneira mais sensata de os usuários avaliarem os projetos é interagir com eles, que requer uma versão interativa dos projetos a serem construídos, embora isso não signifique que seja necessária uma versão em software.


Por meio da simulação, os usuários poderão ter uma noção real de como será interagir com o produto.

Avaliar o projeto


Diz respeito ao processo de determinar a usabilidade e a aceitabilidade do projeto. É medido por meio de vários critérios, incluindo o número de erros que os usuários cometem, se o projeto e o produto são atraentes, se preenchem os requisitos, e assim por diante. O projeto de interação exige um alto nível de participação do usuário

Técnicas de elicitação de requisitos


Trata-se de obter dados que possam contribuir com projeto, ou seja, levantar as necessidades e entender o problema proposto, que é exatamente o primeiro passo que indicamos no item anterior.

Me ajuda a te ajudar – Frase do filme Jerry Maguire

Entrevistas


As entrevistas são um método bastante popular no levantamento de dados. A partir de conversas com potenciais usuários, pode-se entender melhor como as pessoas vão interagir com o sistema a ser desenvolvido. As entrevistas podem ser de três tipos:

  1. Estruturadas: seguem uma estrutura rigida e sequencial, com pouco espaço para comentários.
  2. Semiestruturadas: seguem uma estrutura básica, mas permitem questões ou observações extras a partir do usuário.
  3. Não estruturadas: seguem de acordo com a motivação do entrevistado

Brainstorming


Trata-se de reuniões para gerar ideias a partir da discussão coletiva. Pode envolver especialistas, usuários e outros profissionais relevantes ao projeto. Essa técnica pode ser vantajosa no início de um projeto em que pouco se sabe sobre suas necessidades ou ideias para soluções são escassas.

Prototipação


Prototipação consiste em criar um modelo similar ao definido no projeto ou desenvolver parte do projeto para teste com usuários; é utilizada em momentos de incerteza quanto aos requisitos ou para obter um retorno inicial dos usuários.

Usabilidade na prática

ISO 9126


  • A ISO tem como objetivo criar normas que facilitem o comércio e promovam boas práticas de gestão e o avanço tecnológico, além de disseminar conhecimentos.
  • A expressão ISO 9001 designa um grupo de normas técnicas que estabelecem um modelo de gestão da qualidade para organizações em geral, qualquer que seja o seu tipo ou dimensão.
  • A ISO 9126 descreve um modelo de qualidade do produto de software

ISO 9126 e a usabilidade


  • Funcionalidade
  • Confiabilidade
  • Usabilidade
  • Eficiência
  • Manutebilidade
  • Portabilidade
  • Inteligibilidade: atributos do software que evidenciam o esforço do usuário para reconhecer os conceitos lógicos de uma interface
  • Apreensibilidade: atributos do software que evidenciam o esforço do usuário para aprender as funcionalidades do sistema
  • Operacionalidade: atributo do software que evidencia o esforço do usuário para operá-lo
  • Atratividade: a satisfação subjetiva do usuário durante o uso
  • Conformidade: atributos do software que fazem com que esteja de acordo com as normas

A usabilidade por Nielsen

  1. Visibilidade e status do sistema
  2. Compatibilidade do sistema com o mundo real
  3. Controle do usuário e liberdade
  4. Consistência e padrões
  5. Ajudar os usuários a reconhecer, diagnosticar e recuperar-se de erros
  6. Prevenção de erros
  7. Reconhecimento em vez de memorização
  8. Flexibilidade e eficiência no uso
  9. Estética e design minimalista
  10. Ajuda e documentação

Visibilidade e status do sistema


O sistema mantém os usuários sempre informados sobre ○ que está acontecendo, fornecendo um feedback adequado, dentro de um tempo razoável.

Quando estamos assistindo/ouvindo uma playlist do Youtube, do lado direito fica bem claro: qual vídeo estamos assistindo; qual é próximo; quais assistimos ou não.

Compatibilidade do sistema com o mundo real


O sistema se comunica pela linguagem do usuário, utilizando palavras, frases e conceitos que lhe são familiares, em vez de termos orientados ao sistema.


É aplicada esta estratégia ao utilizar setas, ícones e a cor vermelha para destacar elementos negativos.

Um software que usa essa abordagem é o Photoshop em sua barra de ferramentas.

Controle do usuário e liberdade


Fornecer maneiras de permitir que os usuários saiam facilmente de lugares inesperados, utilizando “saídas de emergência” claramente identificadas

Por exemplo quando criamos um tweet é bacana poder deletá-lo se estivermos afim. Mas não dá pra editar um tweet após 30 min.

Ajudar os usuários a reconhecer, diagnosticar e recuperar-se de erros


As mensagens de erros tem que ser claras e próximas do conteúdo ou ação que causou o erro.

No formulário de cadastro do Spotify caso você não preencha os dados necessários ele deixa bem claro quais campos estão faltando, com um mensagem clara e objetiva.

Consistência e padrões


Evitar fazer com que o usuário tenha que pensar se palavras, situações ou ações diferentes significam a mesma coisa

O botão de anterior, play e próximo sempre apresentam o mesmo padrão em todos os vídeos do Youtube

Prevenção de erros


Não é uma boa ideia deixar seu usuário errar sem explicar previamente o motivo do erro. Melhor do que isso, tente criar um interface que permite o usuário não errar.

A busca do Google faz isso de uma forma muito inteligente. No momento que começamos escrever nossa busca ele já te entrega algumas sugestões, mesmo se a gente escrever a busca com uma ortografia errada ele realiza a busca e pergunta se estamos procurando outra informação com a ortografia correta.

Reconhecimento em vez de memorização


O usuário não tem obrigação de decorar qual foi o caminho que ele fez pra chegar até a página.

Por exemplo, quando você entra em um produto do site da IBM é disponibilizado o caminho que você fez pra chegar até ele. Nós chamamos isso de breadcrumb.

Flexibilidade e eficiência no uso


Fornecer aceleradores invisíveis ao usuário inexperiente, ao mesmo tempo que proporciona aos mais experientes mais rapidez na realização de tarefas.

Por exemplo, no Excel, quando você está focado em uma planilha, pode usar o mouse para navegar para outras células, e também vários atalhos de teclado.

Estética e design minimalista


Por favor não encha linguiça. Toda informação extra que você deixar pro seu usuário pode na verdade adicionar mais uma dúvida, ou seja, deixe o seu layout e o conteúdo o mais simples e direto possível.

Ajuda e documentação


É uma boa não precisar dessa heurística. Implementar documentação e sistema de ajuda sempre é chato e muitos usuários têm o costume de ignorar ambos mas, se for realmente necessário, deixe a documentação próxima do usuário e do elemento ou ação que tenha necessidade de uma explicação mais detalhada.

Por exemplo, no Google Pay tem um campo pra preencher o código de segurança do cartão. Como não é algo muito óbvio, tem uma imagem próxima ao campo mostrando onde fica o código de segurança do cartão.

Modelos e paradigmas de design

Contexto


  • Memória de trabalho ou de curta duração
  • Memória de curta duração também guardam as saídas do sistema sensorial
  • O processador cognitivo irá trabalhar com a informação que foi codificada na memória de curta duração de forma simbólica
  • Forma simbólica = atribuiu significado
  • Um exemplo de memória de curta duração é quando você pede a um garçom um refrigerante. Ele armazena aquela informação até levar a bebida a você, depois aquilo é descartado

Sistema Cognitivo


O sistema cognitivo humano cria modelos mentais ou representações da informação recebida para interpretar as informações de forma simbólica (com os significados que foram atribuidos)


Modelos mentais são as imagens que as pessoas têm dos objetos com os quais interagem, de si próprias, dos outros, do ambiente

Modelos mentais


Pessoas formam modelos mentais por meio de experiência, treinamento e instrução usando representações com base na estrutura do seu raciocínio e no tratamento da informação.


Estudos e teorias cognitivas descrevem dois tipos básicos de modelos mentais: Modelo mental estrutural e Modelo mental funcional

Modelo mental estrutural


Esse modelo demonstra que o usuário internalizou em sua memória a estrutura de como um sistema funciona


Modelo usado para descrever a mecânica interna da máquina ou o sistema com seus componentes. Atua como substituto do objeto real.

Quando você dirige um carro, com o tempo você já internalizou como um carro funciona

Modelo mental funcional


Usa conhecimento armazenado para o usuário recuperar a informação de como um sistema funciona (modelo mental estrutural) e criar um modelo de como fazer para interagir


  • Projetistas e usuários se diferenciam em extensão, níveis de detalhes e natureza (modelo conceitual)
  • Usuários iniciantes e avançados se diferenciam em nível de detalhamento
  • Tipos diferentes de usuários (e.g. operação e gestão) se diferenciam em termos de tarefas (modelo conceitual)

Modelo conceitual


É uma coleção de associações na mente do usuário ou do desenvolvedor, que serão utilizadas para facilitar o entendimento no desenvolvimento e na utilização de interfaces interativa


Como fazer? Colocar conceitos de cada um no papel para estabelecer funções e conexões

Modelo conceitual de um bookmark (favoritos)


Fonte https://www.usabilidoido.com.br/mapeando_modelos_conceituais.html

Diferentes modelos mentais


  • O modelo do designer/projeto é um modelo mental do designer
  • O modelo do usuário é um modelo mental que constitui como o usuário entende e explica a opeção do sistema
  • A imagem do sistema é um modelo conceitual


O que se espera é que a imagem do sistema construído seja bastante parecido com o modelo conceitual que o usuário tinha em mente

Metáfora


Metáfora é uma figura de linguagem, utilizada para melhorar a expressividade de uma informação


Hipótese: pode ajudar na formulação de um modelo conceitual consistente para interação

Objetivo: oferecer aos usuários um esquema de funcionamento de interface que facilite o entendimento e previna erros

Paradigmas (padrões) de design de interação


São propostas de design de interação, as quais são implementadas para a construção de sistemas interativos


  • Diferentes estilos de interação são beseados em diferentes paradigmas
  • Se é um padrão já consolidado é mais fácil do usuário ter facilidade para utilizar
  • Exemplos: metáforas, manipualação direta, interfaces baseadas em agente, computação pervasiva/computação ubíqua

Paradigmas (padrões), estilos e metáforas (exemplos)


Área de trabalho (desktop)


Paradigmas, estilos e metáforas (Exemplos)


Manipulação direta


Paradigmas, estilos e metáforas (exemplos)


Estante de livros


Paradigmas, estilos e metáforas (exemplos)


Carrinho de compras


Cuidados com a metafora


  • Levar a metáfora ao pé da letra
  • Levar a caminhos errados